<template>
  <div class="form-css">
    <a-form class="a-form-css">
      <a-form-item>
        <a-tabs>
          <a-tab-pane key="1">
            <template #title> <icon-calendar /> 选择题 </template>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title> <icon-clock-circle /> 填空题 </template>
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title> <icon-user /> 简答题 </template>
          </a-tab-pane>
        </a-tabs>
      </a-form-item>
      <a-form-item style="width: 90px">
        <a-button class="sub-css" type="primary" @click="onNextClick">
          {{ $t('stepForm.button.next') }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { BaseInfoModel } from '@/api/form';

  // export default {
  //   name: "choose-question-type"
  // };

  const emits = defineEmits(['changeStep']);

  const formRef = ref<FormInstance>();
  const formData = ref<BaseInfoModel>({
    activityName: '',
    channelType: '',
    promotionTime: [],
    promoteLink: 'https://arco.design',
  });

  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'forward', { ...formData.value });
    }
  };
</script>

<style scoped>
  .form-css {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
  }

  .a-form-css {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sub-css {
    align-items: center;

    /* display: flex; */
    justify-content: center;
  }
</style>
